<template>
  <d2-container>
    <div class="mt-3 ml-2">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="考卷名称" prop="examination_name">
          <div style="width: 80%;">
            <el-input v-model="form.examination_name"></el-input>
          </div>
        </el-form-item>
        <div class="row-ac flex-1">
          <div>
            <el-form-item label="地区" prop="area">
              <el-select v-model="form.area" placeholder="选择地区">
                <el-option v-for="item in areaList" :key="item.id" :label="item.area_name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="ml-5">
            <el-form-item label="课程" prop="course">
              <el-select v-model="form.course" placeholder="选择课程">
                <el-option v-for="item1 in courseList" :key="item1.id" :label="item1.course_name"
                  :value="item1.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="row-ac flex-1">
          <el-form-item label="版本" prop="edition">
            <el-select v-model="form.edition" placeholder="选择版本">
              <el-option v-for="item2 in editionList" :key="item2.id" :label="item2.edition_name"
                :value="item2.id"></el-option>
            </el-select>
          </el-form-item>
          <div class="ml-5">
            <el-form-item label="内容" prop="substance">
              <el-select v-model="form.substance" placeholder="选择内容">
                <el-option v-for="item3 in substanceList" :key="item3.id" :label="item3.substance_name"
                  :value="item3.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="row-ac flex-1">
          <el-form-item label="段级" prop="segment">
            <el-select v-model="form.segment" placeholder="选择段级">
              <el-option v-for="item4 in segmentList" :key="item4.id" :label="item4.segment_name"
                :value="item4.id"></el-option>
            </el-select>
          </el-form-item>
          <div class="ml-5">
            <el-form-item label="学期" prop="semester">
              <el-select v-model="form.semester" placeholder="选择学期">
                <el-option v-for="item5 in semesterList" :key="item5.id" :label="item5.semester_name"
                  :value="item5.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="row-ac flex-1">
          <el-form-item label="程度" prop="difficulty">
            <el-select v-model="form.difficulty" placeholder="选择程度">
              <el-option v-for="item6 in difficultyList" :key="item6.id" :label="item6.difficulty_name"
                :value="item6.id"></el-option>
            </el-select>
          </el-form-item>
          <div class="ml-5">
            <el-form-item label="综合" prop="synthesize">
              <el-select v-model="form.synthesize" placeholder="选择综合">
                <el-option v-for="item7 in synthesizeList" :key="item7.id" :label="item7.synthesize_name"
                  :value="item7.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="row-ac flex-1 mt-2">
          <el-form-item label="图片" prop="cover_image">
            <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
              :on-success="handleCoverSuccess" :before-upload="beforeCoverUpload">
              <img v-if="form.cover_image" :src="form.cover_image" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <div class="ml-8">
            <el-form-item label="图标" prop="icon_image">
              <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
                :on-success="handleIconSuccess" :before-upload="beforeIconUpload">
                <img v-if="form.icon_image" :src="form.icon_image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
        </div>
        <div class="row-ac flex-1 mt-2">
          <el-form-item label="首页展示" prop="is_home">
            <el-switch v-model="form.is_home"></el-switch>
          </el-form-item>
          <div class="ml-8">
            <el-form-item label="是否推荐" prop="is_recommend">
              <el-switch v-model="form.is_recommend"></el-switch>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="排序" prop="sort">
          <div style="width: 30%;">
            <el-input v-model="form.sort"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="试卷介绍" prop="sort">
          <div style="width: 80%;">
            <el-input v-model="form.introduce" type="textarea" :rows="5"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="row mt-5" style="width: 80%;">
        <el-button @click="toBack">取 消</el-button>
        <el-button type="primary" v-if="!examinationStata" @click="submitForm">保存</el-button>
        <el-button type="primary" v-if="examinationStata" @click="updateForm">确定</el-button>
      </div>
    </div>
  </d2-container>
</template>

<script>
  import {
    examinationUpdateUrl,
    examinationCreateUrl,
    examinationDetailUrl,
    synthesizeListUrl,
    difficultyListUrl,
    semesterListUrl,
    segmentListUrl,
    substanceListUrl,
    editionListUrl,
    courseListUrl,
    areaListUrl,

  } from '@/utils/answer'
  import {
    imagesUploadUrl
  } from '@/utils/interface'
  import {
    baseURL
  } from '@/utils/request'
  export default {
    data() {
      return {
        examinationList: [],
        synthesizeList: [],
        difficultyList: [],
        semesterList: [],
        segmentList: [],
        substanceList: [],
        editionList: [],
        courseList: [],
        areaList: [],
        form: {
          examination_name: '',
          area: '',
          course: '',
          edition: '',
          substance: '',
          segment: '',
          semester: '',
          difficulty: '',
          synthesize: '',
          is_home: false,
          is_recommend: false,
          sort: '',
          cover_image: '',
          icon_image: '',
          introduce: '',
        },
        rules: {
          country_name: [{
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }]
        },
        actionUrl: baseURL + imagesUploadUrl,
        getExaminationId: '',
        examinationStata: false
      }
    },
    created() {
      this.getSynthesizeList()
      this.getDifficultyList()
      this.getSemesterList()
      this.getSegmentList()
      this.getSubstanceList()
      this.getEditionList()
      this.getCourseList()
      this.getAreaList()
    },
    mounted() {
      if (this.$route.query.examinationId) {
        this.getExaminationId = this.$route.query.examinationId
        this.getExaminationDetail()
        this.examinationStata = true
      } else {
        this.examinationStata = false
      }
    },
    methods: {
      getSynthesizeList() {
        this.$get(synthesizeListUrl).then(res => {
          this.synthesizeList = res.data.data.list
        })
      },
      getDifficultyList() {
        this.$get(difficultyListUrl).then(res => {
          this.difficultyList = res.data.data.list
        })
      },
      getSemesterList() {
        this.$get(semesterListUrl).then(res => {
          this.semesterList = res.data.data.list
        })
      },
      getSegmentList() {
        this.$get(segmentListUrl).then(res => {
          this.segmentList = res.data.data.list
        })
      },
      getSubstanceList() {
        this.$get(substanceListUrl).then(res => {
          this.substanceList = res.data.data.list
        })
      },
      getEditionList() {
        this.$get(editionListUrl).then(res => {
          this.editionList = res.data.data.list
        })
      },
      getCourseList() {
        this.$get(courseListUrl).then(res => {
          this.courseList = res.data.data.list
        })
      },
      getAreaList() {
        this.$get(areaListUrl).then(res => {
          this.areaList = res.data.data.list
        })
      },
      submitForm() {
        this.$post(examinationCreateUrl, this.form).then(res => {
          if (res.data.code == 200) {
            this.$message.success('添加成功')
            setTimeout(() => {
              this.$router.go(-1)
            }, 300) // 延迟1秒执行
          }
        })
      },
      updateForm() {
        this.$put(examinationUpdateUrl + this.getExaminationId + '/', this.form).then(res => {
          if (res.data.code == 200) {
            this.$message.success('修改成功')
            setTimeout(() => {
              this.$router.go(-1)
            }, 300) // 延迟1秒执行
          }
        })
      },
      getExaminationDetail() {
        this.$get(examinationDetailUrl + this.getExaminationId + '/').then(res => {
          this.form = {
            examination_name: res.data.data.examination_name,
            area: res.data.data.area,
            course: res.data.data.course,
            edition: res.data.data.edition,
            substance: res.data.data.substance,
            segment: res.data.data.segment,
            semester: res.data.data.semester,
            difficulty: res.data.data.difficulty,
            synthesize: res.data.data.synthesize,
            is_home: res.data.data.is_home,
            is_recommend: res.data.data.is_recommend,
            sort: res.data.data.sort,
            cover_image: res.data.data.cover_image,
            icon_image: res.data.data.icon_image,
            introduce: res.data.data.introduce,
          }
        })
      },
      handleCoverSuccess(val) {
        this.form.cover_image = val.data.url
      },
      beforeCoverUpload() {

      },
      handleIconSuccess(val) {
        this.form.icon_image = val.data.url
      },
      beforeIconUpload() {

      },
      toBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style>
</style>